/*
 * SonarQube
 * Copyright (C) 2009-2022 SonarSource SA
 * mailto:info AT sonarsource DOT com
 *
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU Lesser General Public
 * License as published by the Free Software Foundation; either
 * version 3 of the License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 * Lesser General Public License for more details.
 *
 * You should have received a copy of the GNU Lesser General Public License
 * along with this program; if not, write to the Free Software Foundation,
 * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 */
/*
 * Inputs
 */
input[type='text'],
input[type='password'],
input[type='email'],
input[type='search'],
input[type='date'],
input[type='number'],
textarea,
select {
  border: 1px solid var(--gray80);
  box-sizing: border-box;
  border-radius: 2px;
  background: #fff;
  color: var(--baseFontColor);
  transition: border-color 0.2s ease;
}

input[type='text']:active,
input[type='password']:active,
input[type='email']:active,
input[type='search']:active,
input[type='date']:active,
input[type='number']:active,
textarea:active,
select:active,
input[type='text']:focus,
input[type='password']:focus,
input[type='email']:focus,
input[type='search']:focus,
input[type='date']:focus,
input[type='number']:focus,
textarea:focus,
select:focus {
  border-color: var(--blue);
  box-shadow: none;
  outline: none;
}

input[type='text']:invalid,
input[type='password']:invalid,
input[type='email']:invalid,
input[type='search']:invalid,
input[type='date']:invalid,
input[type='number']:invalid,
textarea:invalid,
select:invalid {
  box-shadow: none;
  outline: none;
}

input::placeholder,
textarea::placeholder {
  color: var(--secondFontColor);
}

input[type='text'].is-valid,
input[type='password'].is-valid,
input[type='email'].is-valid,
input[type='search'].is-valid,
input[type='date'].is-valid,
input[type='number'].is-valid,
textarea.is-valid,
select.is-valid {
  border-color: var(--green);
}

input[type='text'].is-invalid,
input[type='password'].is-invalid,
input[type='email'].is-invalid,
input[type='search'].is-invalid,
input[type='date'].is-invalid,
input[type='number'].is-invalid,
textarea.is-invalid,
select.is-invalid {
  border-color: var(--red);
}

input.disabled,
input:disabled,
textarea.disabled,
textarea:disabled,
select.disabled,
select:disabled {
  color: var(--disableGrayText) !important;
  border-color: var(--disableGrayBorder) !important;
  background: var(--disableGrayBg) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  box-shadow: none !important;
}

input[type='text'],
input[type='password'],
input[type='email'],
input[type='search'],
input[type='date'],
input[type='number'] {
  height: var(--controlHeight);
  padding: 0 6px;
}

input[type='search'] {
  -webkit-appearance: textfield;
}

input[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}

textarea {
  padding: 3px;
}

textarea.width-100 {
  max-width: 100%;
}

textarea.fixed-width {
  resize: vertical;
}

select {
  height: var(--controlHeight);
  line-height: var(--controlHeight);
}

.input-tiny {
  width: 60px !important;
}

.input-small {
  width: 100px !important;
}

.input-medium {
  width: 150px !important;
}

.input-large {
  width: 200px !important;
}

.input-super-large {
  width: 100% !important;
  max-width: 300px;
  min-width: 200px;
}

.input-ghost {
  padding: 0 !important;
  border: none !important;
  background-color: transparent !important;
}

.input-clear {
  background-color: transparent !important;
}

.input-code {
  font-family: var(--sourceCodeFontFamily);
  font-size: var(--smallFontSize);
}

em.mandatory {
  color: var(--mandatoryFieldColor);
  font-style: italic;
}

.form-field {
  clear: both;
  display: block;
  padding-bottom: calc(2 * var(--gridSize));
}

.form-field label {
  display: block;
  font-weight: bold;
  padding-bottom: calc(var(--gridSize) / 2);
}

.form-field-description {
  line-height: 1.4;
  color: var(--secondFontColor);
  font-size: var(--smallFontSize);
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.form-field input[type='text'],
.form-field input[type='email'],
.form-field input[type='password'],
.form-field textarea,
.form-field select,
.form-field .Select {
  width: 250px;
}
